<template>
  <div class="tab" id="tab">
    <ul>
      <li
        @mouseover="change(index)"
        :class="currentIndex == index ? 'active' : ''"
        v-for="(item, index) in list"
        :key="item.id"
      >
        {{ item.title }}
      </li>
    </ul>
    <div
      :class="currentIndex == index ? 'current' : ''"
      class="content"
      v-for="(item, index) in list"
      :key="item.id"
    >
      <img class="content_imgShow" :src="item.img" />
      <div class="content_descShow">
        <p class="content_descShow_p1">{{ item.text1 }}</p>
        <p class="content_descShow_p2">
          {{ item.text2 }}
        </p>
        <p class="content_descShow_p3">
          <span class="box"></span>{{ item.text3 }}
        </p>
        <div class="content_descShow_more" v-if="item.text6">
          <p class="content_descShow_p1">{{ item.text4 }}</p>
          <p class="content_descShow_p2">
            {{ item.text5 }}
          </p>
          <p class="content_descShow_p3">
            <span class="box"></span>{{ item.text6 }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
 <script>
 export default{
   props:{
     currentIndex:Number,
     list:Array
   },
  data() {
    return {
          currentIndexSelf:0,
    }},
            methods:{
                change(index){
                    this.currentIndexSelf=index;
                    this.$emit("indexChange",this.currentIndexSelf)
                }
            }
 }
</script>
<style lang="less" scoped>
/* @keyframes mymove {
  from {
    left: 0px;
  }
  to {
    left: 200px;
  }
} */
.tab {
  margin-left: 5px;
  border-radius: 5px;
  width: 99%;
  height: 99%;
  padding-top: 20px;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 5px 5px 10px rgb(238 243 251 / 100%);
  .active {
    font-family: "微软雅黑", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(
      90deg,
      rgba(2, 173, 255, 1) 1%,
      rgba(87, 111, 251, 1) 100%
    );
  }
  ul {
    display: inline-block;
    height: 50px;
    background: inherit;
    background-color: rgba(242, 242, 242, 1);
    border-radius: 186px;
    padding: 5px;
    li {
      color: #888;
      font-size: 14px;
      display: inline-block;
      cursor: pointer;
      height: 50px;
      line-height: 50px;
      width: 173px;
      border-radius: 100px;
      text-align: center;
    }
  }
  .content {
    display: none;
    height: 454px;
    width: 1081px;
  }
  .current {
    margin: 30px auto;
    display: block;
    height: 454px;
    width: 1081px;
    display: flex;

    justify-content: space-between;
    .content_imgShow {
      width: 750px;
      height: 454px;
      border-radius: 10px;
    }
    .content_descShow {
      text-align: left;
      width: 300px;
      height: 454px;
      .content_descShow_p1 {
        color: #409eff;
        font-size: 18px;
        font-weight: 700;
        font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
      }
      .content_descShow_p2 {
        margin-top: 30px;
        color: #666;
        font-size: 14px;
        line-height: 24px;
      }
      .content_descShow_p3 {
        margin-top: 30px;
        color: #409eff;
        font-size: 14px;
        .box {
          display: inline-block;
          height: 10px;
          width: 10px;
          background-color: #409eff;
          border-radius: 50%;
        }
      }
      .content_descShow_more {
        margin-top: 50px;
      }
    }
  }
}
.tab:hover {
  box-shadow: 5px 5px 10px rgb(136 136 136 / 39%);
}
</style>
